<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<script>
				cmdAdd = "/ace/people/add.action?ISNEW=true";
			    cmdEdit = "/ace/people/edit.action";
				cmdDelete = "/ace/people/delete.action";
				cmdList = "/ace/people/list.action";
		</script>
		
	</head>
<body  class="no-skin">
			<div class="page-content">
					<form id="queryForm" action="${cmdList}">
					<div class="page-content-area">
							<div class="row">
								 <div class="col-sm-12">
									<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
											<div class="widget-header widget-header-blue widget-header-flat">
												<h4 class="widget-title">数据查询</h4>
					
												<div class="widget-toolbar">
													<a href="#" data-action="collapse">
														<i class="ace-icon fa fa-chevron-up"></i>
													</a>
												</div>
											</div>

											<div class=" widget-body">
														<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
														<div class="widget-main" >
												
																	<div class="form-group col-xs-6 col-sm-6  col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label" style="text-align:right" for="name">姓名:</label>
														
																		<div class="col-sm-8">
																			<input type="text" id="_sk_name" name="_sk_name" class="col-xs-12 col-sm-12">
																		</div>
																	</div>
																	
																	<div class="form-group col-xs-6 col-sm-6  col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label" style="text-align:right" for="id"> ID: </label>
														
																		<div class="col-sm-8">
																			<input type="text" id="_leq_id" name="_leq_id" class="col-xs-12 col-sm-12">
																		</div>
																	</div>
																	
																	<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">性别:</label>
																		<div class="col-sm-8">
																			<cx:select list="$SEX" id="_seq_sex" name="_seq_sex" cssClass="form-control" emptyOption="true"></cx:select>
																		</div>
																	</div>
																	
																	<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">状态:</label>
																		<div class="col-sm-8">
																			<cx:select list="$STATE" id="_seq_status" name="_seq_status" cssClass="form-control" emptyOption="true"></cx:select>
																		</div>
																	</div>
																				
																				
																	<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label" style="text-align:right" for="enddate">出生年月:</label>
																		<div class="col-sm-8">
																			<div class="input-daterange input-group">
																				<input type="text" class="input-sm form-control" style="padding-left:0px" name="_dge_brith">
																				<span class="input-group-addon" style="width:6px">
																					<i class="fa fa-exchange"></i>
																				</span>
																				<input type="text" class="input-sm form-control" style="padding-left:0px" name="_dle_brith">
																			</div>
																		</div>
																	</div>
																	
																	<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4">
																		<label class="col-sm-4 control-label" style="text-align:right" for="memo">备注:</label>
														
																		<div class="col-sm-8">
																			<input data-rel="tooltip" type="text" id="_seq_memo" name="_seq_memo" title="" class="col-xs-12 col-sm-12" data-placement="bottom">
																		</div>
																	</div>
																	
																	<div class="col-md-12 center">
																			<div class="col-xs-3"></div>
																			<div class="col-xs-6">
																				<button class="btn btn-purple btn-lg no-border" type="button" name="btn-query">
																					<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
																					查询
																				</button>
																				&nbsp;&nbsp;&nbsp;
																				<button class="btn btn-grey btn-lg no-border" type="reset">
																					<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
																					重置
																				</button>
																			</div>
																   </div>
													
														</div><!-- /.widget-main -->
												</div><!-- /.widget-body -->
											</div><!-- /.widget-box -->
									</div><!-- /.col-sm-12 -->
								</div><!-- /.row -->
								 
								<hr style="margin-top:0px;margin-bottom:0x">
								
								<div class="row">
									<div class="col-xs-12">
										<!--  
										<h3 class="header smaller lighter blue">数据列表</h3>
										-->
										<p>
											<button type="button" name="btn-add" class="btn btn-primary btn-sm no-border" onclick="Javascript:doAdd();">
												<i class="ace-icon glyphicon glyphicon-plus bigger-110"></i>
												新增
											</button>


											<button  type="button" name="btn-modify" class="btn btn-success btn-sm no-border" onclick="Javascript:doEdit();">
												<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
												修改
											</button>
											
											<button type="button"  name="btn-delete" class="btn btn-danger btn-sm no-border" onclick="Javascript:doDelete();">
												<i class="ace-icon fa fa-trash-o bigger-120"></i>
												删除
											</button>
										</p>
										<!--
										<div class="table-header">
											Results for "Latest Registered Domains"
										</div>
										-->
										<!-- <div class="table-responsive"> -->

										<!-- <div class="dataTables_borderWrap"> -->
										<div>
											<table id="jquery-table" class="table table-striped table-bordered table-hover">
												<thead>
													<th><input type="checkbox" id="checkAll"/></th>
													<th>ID</th>
													<th>姓名</th>
													<th>性别</th>
													<th>生日</th>
													<th>创建时间</th>
													<th>状态</th>
													<th>备注</th>
													<!-- <th>操作</th> -->
												</thead>
												<tbody>
												</tbody>
											</table>
										</div>
									</div><!-- /.col -->
							</div><!-- /.row -->
							
							
						</div><!-- /.page-content-area -->
					 </form>
				</div><!-- /.page-content -->
			
				<%@ include file="/common/common-js.jsp" %>
	
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			var jqTable =null;
			
			jQuery(function($) {
				jqTable = $('#jquery-table').dataTable( {
					//表格整体布局
					"sDom": "<t<'row'<'col-xs-12 col-md-12'<'col-xs-3 col-md-2 col-lg-2'l><'col-xs-3 col-md-1 col-lg-1'i><'col-xs-6 col-md-9 col-lg-9'p>>>>.",
				  	//表头列控制(包括对应数据列名称、控制列显隐、是否排序及排序规则等等)
				  	"columns": [
				  		{ "data": "PK" ,"bSortable": false},
                        { "data": "id", "visible": true,"bSortable": true},
                        { "data": "name", "visible": true,"bSortable": false },
                        { "data": "sex" ,"bSortable": true},
                        { "data": "brith","bSortable": false},
                        { "data": "createtime","bSortable": true},
                        { "data": "status" ,"bSortable": true},
                        { "data": "memo" ,"bSortable": false}
                    ],
                    "sColumns":["PK","id","name","sex","brith","createtime","status","memo"],
                    "aaSorting": [[6,"desc"]],//从第0列开始，以第6列倒序排列
                    //数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
				    "columnDefs": [// 将Salary列变为红色
				    	{
				    	  	  "targets": [0], // 
				    	  	  "data": "PK", // 数据列名
		                      "render": function(data, type, full) { // 返回自定义内容
		                          return "<input type='checkbox' name='PK' value='"+full.id+"'/>";
		                      }
				    	},
				    	{
				    		  "name":"id",
				    	  	  "targets": [1], // 
		                      "data": "id"
				    	},
				    	{
				    		  "name":"name",
				    	  	  "targets": [2], // 
		                      "data": "name"
				    	},
				    	{
				    		  "name":"sex",
				    	  	  "targets": [3], // 
		                      "data": "sex",
		                      "render": function(data, type, full) { // 返回自定义内容
		                      	  var paramName = ParamTool.getParamName("$SEX",data);
		                          return paramName;
		                      }
				    	},
				    	 {
				    	 	  "name":"brith",
				    	  	  "targets": [4], // 
		                      "data": "brith"
				    	},
				    	{
				    		  "name":"createtime",
				    	  	  "targets": [5], // 
		                      "data": "createtime"
				    	},
                 	 	{
                 	 		  "name":"status",
		                      "targets": [6], // 目标列位置，下标从0开始
		                      "data": "status", // 数据列名
		                      "render": function(data, type, full) { // 返回自定义内容
		                          var paramName = ParamTool.getParamName("$STATE",data);
		                          var html = "";
		                          if(data == '1'){
		                             html = '<span class="label label-success arrowed-in arrowed-in-right">'+paramName+'</span>'
		                          }else{
		                          	 html = '<span class="label label-danger arrowed">'+paramName+'</span>'
		                          }
		                        
		                          return html;
		                      }
                  		},
                  		{
				    	  	  "targets": [7], // 
		                      "data": "memo"
		                }
                  	],
					//"bPaginate": true, //翻页功能
					//"bLengthChange": true, //改变每页显示数据数量
					//"bFilter": false, //过滤功能
					//"bSort": true, //排序功能
					//"bInfo": true,//页脚信息
					//"bAutoWidth": true,//自动宽度
					//"sPaginationType" : "full_numbers",
					"oLanguage": oLanguage,
					"sPaginationType": "full_numbers",//显示数字的翻页样式
					//"bStateSave": false, //状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。
					"sScrollY": "385px",//垂直限制宽度
					//"sScrollX": "100%", //水平限制宽度
					//"sScrollYInner": "100%",
					//"sScrollXInner": "100%",
					//"bScrollCollapse": true,
					"bProcessing": true,//请求等待
					"bServerSide": true,//后台获取数据
					"sAjaxSource": ctx+"/ace/people/list.action?rand="+Math.random(),//数据源URL
					"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
							$.ajax({
								"dataType": 'json',
								"type": "POST",
								"url": sSource,
								"data":{
									"aoData":JSON.stringify(aoData), //包含分页属性、排序字段、排序方式等等
									"_sk_name": $("#queryForm input[name='_sk_name']").val(),
									"_leq_id": $("#queryForm input[name='_leq_id']").val(),
									"_seq_sex": $("#queryForm select[name='_seq_sex']").val(), 
									"_seq_status": $("#queryForm select[name='_seq_status']").val(),
									"_seq_memo": $("#queryForm input[name='_seq_memo']").val(),
									"_dle_brith": $("#queryForm input[name='_dle_brith']").val(),
									"_dge_brith": $("#queryForm input[name='_dge_brith']").val()
								},
								"success": function(resp){
									fnCallback(resp);
								}
							});
					}
			    });
			    
			    
			    
				//日期组件初始化
				$('.date-picker').datepicker({
					autoclose: true,
					todayHighlight: true
				//点击日期图标，触发日期选择
				}).next().on(ace.click_event, function(){
					$(this).prev().focus();
				});
				
				
				//事件范围插件初始化
				$('.input-daterange').datepicker({
					autoclose:true,
					format:'yyyy-mm-dd'
				});
				
			    /** =============================[start 按钮点击事件 start] ============================== **/
			    
			    //【查询】按钮Click事件
			    $("button[name='btn-query']").bind("click", function () { //按钮 触发table重新请求服务器
        			jqTable.fnDraw();
    			});
    			
			    /** =============================[end 按钮点击事件 end] ============================== **/
			    
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			
		})//end jquery初始化
			
				
		/****************************************************************************/
		  /* ACE事件处理
		  * 以下事件触发，会在这个方法进行处理,通过name属性判断具体事件：
		  * 	(1)、导航栏固定，name=navbar_fixed
		  * 	(2)、菜单栏固定，name=sidebar_fixed
		  * 	(3)、面包屑固定，name=breadcrumbs_fixed
		  * 	(4)、主容器固定，name=main_container_fixed
		  * 	(5)、菜单栏收缩，name=sidebar_collapsed
		  */
		 /***************************************************************************/
		
		//全选Checkbox事件
		$(document).on('click', 'th input:checkbox' , function(){
			var that = this;
			$("input[name='PK']").each(function(){
				this.checked = that.checked;
				$(this).closest('tr').toggleClass('selected');
			});
		});


		 window.onresize=function(){
				if(jqTable){
					 jqTable.fnDraw();//窗口resize表格整体重新渲染
				}
		 }
			
		</script>
		
		
</body>
</html>
